export default class SerachKeyWord extends React.Component {
    render() {
        const {
            brand,
            supp,
            keyword,
            category,
            level,
            specification,
            closeBrand,
            closeSupp,
            closeCategory,
            closeLevel,
            closeSpecification
        } = this.props;
        let keyword_ = decodeURIComponent(
            (keyword && keyword.replace(/%/g, "%25")) || ""
        );
        return (
            <div className={"search-page-pro-keyword"}>
                <p className={"search-page-pro-keyword-p1"}>全部结果</p>
                {category && (
                    <p className={"search-page-pro-keyword-tri"}>{">"}</p>
                )}

                {category && (
                    <div className={"search-page-pro-keyword-brand-box"}>
                        <div className={"search-page-pro-keyword-brand"}>
                            <p className={"search-page-pro-keyword-p1"}>
                                分类：
                                <span
                                    className={"search-page-pro-keyword-span"}
                                >
                                    {Filter.cutString(category, 15, 1)}
                                </span>
                            </p>
                            <p
                                onClick={closeCategory}
                                className={"search-page-pro-keyword-close"}
                            >
                                x
                            </p>
                        </div>
                    </div>
                )}
                {brand && (
                    <p className={"search-page-pro-keyword-tri"}>{">"}</p>
                )}
                {brand && (
                    <div className={"search-page-pro-keyword-brand-box"}>
                        <div className={"search-page-pro-keyword-brand"}>
                            <p className={"search-page-pro-keyword-p1"}>
                                品牌：
                                <span
                                    className={"search-page-pro-keyword-span"}
                                >
                                    {Filter.cutString(brand, 15, 1)}
                                </span>
                            </p>
                            <p
                                onClick={closeBrand}
                                className={"search-page-pro-keyword-close"}
                            >
                                x
                            </p>
                        </div>
                    </div>
                )}
                {supp && <p className={"search-page-pro-keyword-tri"}>{">"}</p>}

                {supp && (
                    <div className={"search-page-pro-keyword-brand-box"}>
                        <div className={"search-page-pro-keyword-brand"}>
                            <p className={"search-page-pro-keyword-p1"}>
                                供应商：
                                <span
                                    className={"search-page-pro-keyword-span"}
                                >
                                    {Filter.cutString(supp, 15, 1)}
                                </span>
                            </p>
                            <p
                                onClick={closeSupp}
                                className={"search-page-pro-keyword-close"}
                            >
                                x
                            </p>
                        </div>
                    </div>
                )}
                {level && (
                    <p className={"search-page-pro-keyword-tri"}>{">"}</p>
                )}
                {level && (
                    <div className={"search-page-pro-keyword-brand-box"}>
                        <div className={"search-page-pro-keyword-brand"}>
                            <p className={"search-page-pro-keyword-p1"}>
                                代理级别：
                                <span
                                    className={"search-page-pro-keyword-span"}
                                >
                                    {Filter.cutString(level, 15, 1)}
                                </span>
                            </p>
                            <p
                                onClick={closeLevel}
                                className={"search-page-pro-keyword-close"}
                            >
                                x
                            </p>
                        </div>
                    </div>
                )}
                {specification && (
                    <p className={"search-page-pro-keyword-tri"}>{">"}</p>
                )}
                {specification && (
                    <div className={"search-page-pro-keyword-brand-box"}>
                        <div className={"search-page-pro-keyword-brand"}>
                            <p className={"search-page-pro-keyword-p1"}>
                                规格：
                                <span
                                    className={"search-page-pro-keyword-span"}
                                >
                                    {Filter.cutString(specification, 15, 1)}
                                </span>
                            </p>
                            <p
                                onClick={closeSpecification}
                                className={"search-page-pro-keyword-close"}
                            >
                                x
                            </p>
                        </div>
                    </div>
                )}
                {keyword_ && (
                    <p className={"search-page-pro-keyword-tri"}>{">"}</p>
                )}
                <p className={"search-page-pro-keyword-word"}>
                    {keyword_ ? '"' + keyword_ + '"' : ""}
                </p>
            </div>
        );
    }
}

class RightIcon extends React.Component {
    render() {
        const { keyword_ } = this.props;
        return <p className={"search-page-pro-keyword-tri"}>{">"}</p>;
    }
}
